<template>
    <div class="pre-order">
        <h1 class="confirm-title">确认订单</h1>
        <!-- 表格 -->
        <payTable :columns="columns" :tableData="tableData" :tableLoading="tableLoading" :border="false" >
            <!-- 自定义展示产品名称 -->
            <template v-slot:productName="{row}">
                <img :src="row.imageUrl" style="vertical-align:middle;" height="20" alt="">
                <span style="color:green">&nbsp;&nbsp;{{row.productName}}</span>
                <br>
                <span>{{row.description}}</span>
            </template>
            <!-- 自定义计数器 -->
            <template v-slot:count="{row}">
                <el-input-number v-model="count" :min="1" :max="row.inventory" @change="handelCountChange(row.price)" />
            </template>
            <!-- 自定义总价 -->
            <template v-slot:total>
                <b>{{total}}&nbsp;元</b>
            </template>
        </payTable>
        <!-- 确认订单按钮 -->
        <div class="total-fee">
            <div class="box-wrap">
                <div class="box-shadow">
                    <span class="realpay--title" data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
                    <span class="realpay--price-symbol">¥</span>
                    <span class="realpay--price" style="color: rgb(255, 80, 0)">{{ total }}</span>
                    <div class="order-confirmAddr">
                        <div class="confirmAddr-addr-user">
                            <span class="confirmAddr-title">充值详情：</span><span
                                class="confirmAddr-pro">{{desc}}</span>
                        </div>
                        <div class="confirmAddr-addr">
                            <span class="confirmAddr-title">充值账户：</span><span
                                class="confirmAddr-usn">{{userStore.userInfo.nickname}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn">
                <el-button  type="danger" @click="commitOrder">提交订单</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import payTable from "@/components/payTable/index.vue"
import * as api from "@/api/product"
import * as payApi from "@/api/pay.js"
// 引入路由对象
import { useRouter, useRoute } from "vue-router";
import { onMounted,ref } from "vue";
// 引入用户store
import {useUser} from "@/store/users.js"

import { ElMessage, ElMessageBox} from "element-plus";
// 使用用户store
let userStore = useUser()
// 使用路由对象
let route = useRoute()
let router = useRouter()
// 业务
    // 1、获取上一个页面传递过来的query参数，获取当前的产品信息
    let {product_id} = route.query
    // 详情信息
    let desc = ref("")
    // 2、展示产品信息
    let getProduct = async () =>{
        // 
        tableLoading.value = true
        try{
            // 根据商品id获取商品详情，发送请求
            let res = await api.getProductApi(product_id)
            console.log(res)
            tableData.value = res.data.data
            // 商品详情
            desc.value = res.data.data[0].description
            // 关闭加载动画
            tableLoading.value = false
            // 第一次拿到了商品，所以对total进行初次赋值操作，可以将数据中的price作为total的首次参数
            total.value = res.data.data[0].price;
        }catch(e){
            console.log(e)
            // 关闭加载动画
            tableLoading.value = false
        }
    }
    onMounted(()=>{
        getProduct()
    })
    
    // 声明一个加载动画
    let tableLoading = ref(false)
    // 声明一个表格数据
    let tableData = ref([])

    // 声明一个列对象，用于展示表格数据
    let columns = ref([
        {
            label:"产品名称",
            prop:"productName"
        },
        {
            label:"单价",
            prop:"price"
        },
        {
            label:"数量",
            prop:"count"
        },
        {
            label:"总价",
            prop:"total"
        },
    ])

    // 声明计数器的数量和数量改变的方法
    let count = ref(1)
    
    // 计算总价(只是给用户看，并不能决定最终付款的价格)
    let total = ref("0.00")
    let handelCountChange = (price) =>{
        total.value = (count.value * price).toFixed(2)
    }

    
    // 3、进行下单

    // 支付核心流程或者关键字
    // 下单：传递商品id和商品数量 
    let commitOrder = async ()=>{
        // 消息提示框
        ElMessageBox.confirm('此操作将提交这条订单，是否继续?','提交提示',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        })
        // 点击确定按钮
        .then(async ()=>{
            // 1、调用下单接口，传递product_id和产品数量quantity
            try{
                let res = await payApi.preOrderApi(product_id,count.value)
                // 会返回订单号
                console.log(res)
                // 2、跳转页面，跳转到支付页面，pay/payMent
                router.push({path:"/pay/payMent",query:{order_id:res.data.order_id}})
                ElMessage({
                    type:'success',
                    message:res.data.msg
                })
            }catch(e){
                console.log(e)
            }
        })
        // 点击取消按钮
        .catch(()=>{
            ElMessage({
                message: '已取消提交',
                type: 'warning',
            })
        })
        
        
        // 3、payMent需要拉取订单详情，并且发起支付
    }
    // 支付：传递订单id

</script>


<script>
export default{
    meta:{
        name:'预支付'
    }
}



</script>

<style lang="less" scoped>
.price {
	color: #ff0036;
	font-weight: bolder;
}
.total_fee {
	font-size: 16px;
	color: #ff0036;
}
.el-button {
	width: 180px;
	border-radius: 0;
}
.confirm-title {
	text-align: left;
	margin-bottom: 30px;
}
.pre-order {
	padding: 80px 0 0 0;
}
.total-fee {
	margin-top: 50px;
	text-align: right;
}
.box-wrap {
	display: inline-block;
	border: 1px solid #ff0036;
	.box-shadow {
		border: 3px solid #fff0e8;
		min-width: 300px;
		padding: 10px 5px 10px 20px;
		.realpay--title {
			font-weight: 700;
			color: #333;
		}
		.realpay--price-symbol {
			font-size: 26px;
			margin-right: 4px;
			color: #999;
		}
		.realpay--price {
			color: #ff0036;
			font: 700 26px tahoma;
		}
		.order-confirmAddr {
			line-height: 1.6;
			font-weight: bolder;
			margin-top: 10px;
			font-size: 16px;
			// text-align: center;
			// font-family: "PingFang SC";
			.confirmAddr-usn {
				color: #ff0036;
				font-size: 20px;
			}
			.confirmAddr-pro {
				color: goldenrod;
				font-size: 16px;
			}
		}
	}
}
</style>